Welcome to the Water Mobile theme documentation, by theunexpected1. Use the menu to left side to navigate quickly through the documentation.

If you're having an issue with the theme and can't find the answer here, then please send me an email through my profile page: http://themeforest.net/theunexpected1 and I will try to answer you as quickly as possible.

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find 2 versions.

• PHP version

• HTML version

The template is built with the latest standards of front end development, compatible with all smartphones and tablet devices available in the market including but not limited to iPhone, iPad, Android devices, Blackberry and Windows Phone 7.

The tempalte uses quality techniques like LESS CSS to reduce coding time by re-using common code, bringing programming hierarchy into styling and makes the template really easy to customize. Say, for example, changing the entire template's color theme can be just 1 line-changer.

Template features:

• Minimalistic design language

• W3 valid HTML5 Liquid Layout

• Unlimited theming possibilites

• All Company pages: About | Services/Products | Portfolio Gallery | Videos Gallery | Photos Gallery | Career | Blog | Contact | [Add more pages]

• Info page - for PhoneGap Applications or general overlay-type of a page

• Web Compatible standard typography

• Google Fonts

• Working AJAX Contact form with Validation and Email Submission

• Google Maps

• Social presence links

This template is unique in it's own way - it can allow you to specify a "theme" color for your template, and it automatically styles the whole website based on that theme color. This is a single "css" property change on your part, and the website uses light and dark shades of your primary color throughout the template - it works like magic, using {less} CSS!

/*
File: /css/styles.less
*/
 
/* less codes */
	     
	     
	     
/* sample color themes*/
@red :#e51400;
@blue: #0076a3;
 
/*just change the below to suit your needs*/
@themeColor: @blue;
 

/*use it to glory*/
color: @themeColor;

This template comes packed with a handful of typography components, below is how you can use these within your pages:

• Headers

  								
  								
  								Refer to typography page for below code preview:
  								
  H1
  								
  H1 Mini
  								
  H1 special
  								
  H1 Special Mini
  								
   H1 Border 
  								
  							

• Post Types Type-1

  				
  								
  								
  
  									
  
  									    Oil N Gas Company beats Apple.
  									    
  
  										   
  									    
  									
  									
  
  									    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  									
  									
  
  									     26-Jan-13
  									    Read More
  									
  								
  								
  							

  
  
  Type-2

  				
  								
  								
  
  									   
  									
  
  									    Built Google Chrome > Made it open source
  									
  									
  
  									    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  									
  									
  
  									     View Photos
  									     View Website
  									
    
  								
  																
  							

  
• Photo Albums

  								
  
  									
  
  									    
  
  										
  										    01
  										    
  										
  										
  										     Sharp Colors and Fonts 
  										     3 
  										
  									    
    
  									
  								
  							

  
• Photo Galleries Provide the number of columns you require as a data attribute to the main .gallery-items as below and the columns will build autmatically (jQuery splitter)

  					
  								
  
  								    
   Loading Photos...
  								    
  
  									
  
  										
  
  										    
  											
  										    
  										
  										
  
  										    
  											
  										    
  										
  										
  
  										    
  											
  										    
  										
  										...
  										...
  										...
  										
  									
  								    
  								
  							

  
• Columns - 1 / 2 / 3 / 4 Regular paragraphs can be split into columns groups of up to 4 columns in the following way:

  								
  
  									
  
  									    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
  									
  									
  
  									    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
  									
  								
  								    
  							

  Change 'column-2' with any number (between 1-4). Eg: 'column-4'
• Simple Lists

  								
  
  									 Adidas 
  								
  							

• Forms & Forms elements

• Links / Buttons

• Light / Dark Page Add the class 'dark-page' to the main Div of a page to make it a dark page. Check "Info Page" for reference.

  								
  
  									...
  									...
  									...
  								
  							

• Messages

  								
  Success Message.
  								
  Warning Message.
  								
  Error Message.
  								
  Notification Message.
  							

• Forms Forms have enabled validation and ajax submission. However, if you wish to disable ajax on any form, just add the class 'no-ajax' to the Form tag and the form will normall submit via postback. Refer to forms.js for codes specific to form binding.

All template styles related to layout and design (except third party) can be found in: /less/styles.less

Powerful Less CSS
The template leverages the power of dynamic and structured CSS writing style, and makes writing CSS a lot more readable and easier. Use of variables reduces your work and makes the code less messier. Below is an example:

Nesting CSS Classes:

						/* You can write the below: */
						.parent-container {
							padding: 10px;
							
							.child-container {
								border: 1px solid #000;
								padding: 5px;
							}
						}
						
						/* Old-style not required like the below: */
						.parent-container {
							padding: 10px;
						}	
						.parent-container .child-container {
							border: 1px solid #000;
							padding: 5px;
						}
					

Use of Variables:

						/* You can write the below: */
						@themeColor: #ec12e3;
						
						/* You will see that this variable can be easily used instead of
						writing real color, making it easier to change your website "theme"
						at the snap of your fingers - so easy! Below example: */
						.heading {
							color: @themeColor;
						}
						p {
							background-color: @themeColor;
						}
					

Traditional CSS alternative
For some reason if you decide to not use the power of lessCSS, you can anytime start writing normal simple css, as well - the template supports both styles

						/* Below will also work if you don't want lessCSS: */
						.parent-container {
							padding: 10px;
						}	
						.parent-container .child-container {
							border: 1px solid #000;
							padding: 5px;
						}
					

You will need to detect on your primary desktop website whether the visitor is accessing from a computer, or a phone or a tablet.
The code below will help you detect the device of the user on both server-side(PHP) and client-side (JavaScript).

Please find the Php code files in "Source/MobileDetect.zip"

For using the javascript detection, you will need to include the file from MobileDetect.zip "MobileDetect.js", and run the following code in your primary website.

						$(document).ready(function(){
							AppUtility.mobile.detect("http://m.sitename.com");
						});
					

For using the php detection, you will need to include the file from MobileDetect.zip "php-mobile-detect.v.2.1.RC/Mobile_Detect.php", and run the following code in your primary website.

						// Check for mobile device.
						require_once 'Mobile_Detect.php';
						$detect = new Mobile_Detect();
						$layout = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop');
					

Here is a short explanation of the javascript files we have included with the theme.

• js/forms.js Is used for the binding of form with validation and submission.

• js/main.js This file contains javascript for the custom scripts used in the theme.

  This file is broken down into
  1. App Object - this object enlists all the functionalities
  2. Bindings - this includes general and page level bindings and actions
  3. Events - On specific events, these actions should take place (like on resizing window - rare case but we still consider it)
  4. Extras - Any extra functions can be collected in this space
  5. Main - Initiates the App and enables all events
• Rest of the files are assistance libraries / core to framework (modernizer, jquery, jquerymobile, etc.)

We have used the following opensource projects, fonts or other files as listed.

• jQuery http://jquery.com/

• Source Sans Font http://www.google.com/webfonts/specimen/Source+Sans+Pro

• Josefin Sans Font http://www.google.com/webfonts/specimen/Josefin+Sans